/*
  学习目标：使用React-Redux连接库, 简化Redux在React中的使用
  步骤：
     
*/

import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show && <Son />}
    </div>
  );
}

function Son() {
  // const [count, setCount] = useState(store.getState().count);

  // useEffect(() => {
  //   const unFn = store.subscribe(() => {
  //     setCount(store.getState().count);
  //   });

  //   return () => {
  //     unFn();
  //   };
  // }, []);

  // 3. 使用useSelector获取数据
  const count = useSelector((state) => state.count);
  // 4. 使用useDispatch获取dispatch函数
  const dispatch = useDispatch();

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      <button onClick={() => dispatch({ type: 'add' })}>+1</button>
      <button onClick={() => dispatch({ type: 'des' })}>-1</button>
    </div>
  );
}
